<template>
	<div class="prod_container">
		<h2>助贷产品列表页</h2>
		<div class="product_list">
			<h3><span class="prod_title">产品名称</span><span class="prod_des">产品描述</span></h3>
			<div v-for="item in productData">
				<router-link :to="{path:'/productDetail',query:{id:item.id}}">
					<span class="prod_title">{{item.title}}</span>
					<span class="prod_des">{{item.content}}</span>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default ({
		name:'productList',
		data(){
			return {
				loginState:false,
				productData:[],
			}
		},
		methods : {
			loginStateFun(){
				var that = this
				this.$ajax({
					url:'/api/user/status',
					method:'post'
				})
				.then(function(res){
					if(res.data.code==200){
						if(res.data.data.isLogin=='Y'){
							that.loginState = true
						}
					}
				})
			},
			//获取商品
			getProductListData(){
				var that = this;
				this.$ajax({
					url:'/api/home/list',
					method:'post'
				})
				.then(function(res){
					if(res.data.code == 200){
						that.productData = res.data.data;
					}
				})
			}
		},
		created () {
			this.getProductListData();
			this.loginStateFun();
		}
	})

</script>

<style scoped lang="less">
	.prod_container{
		width: 600px;height: 100%;
		margin:0 auto;
		h2{text-align:center;}
		h3{
			color: blue;height:50px;line-height:50px;text-align: center;
		}
		
		.prod_title{
			width: 180px;padding: 10px; display: inline-block;text-align:center;height:60px;line-height:40px;vertical-align: top;
		}
		.prod_des{
			padding:10px;display:inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:360px;height:60px;line-height:40px;
		}
		a{
			display:block;text-decoration:none;color:#000;
		}
		a:hover span{
			color:red; 
		}
	}
	


</style>